<style scoped lang="scss">
  .comp-drag-multiple-imagepdfupload-box {
    .upload-btn {
      float: left;
    }
    /deep/ .el-upload {
      width: 100px;
      height: 100px;
      line-height: 100px;
      border: 1px dotted #999;
      color: #999;
      font-size: 32px;
      font-weight: normal;
      border-radius: 4px;
    }
    .images {
      margin: 0 10px 10px 0;
      float: left;
      width: 100px;
      height: 100px;
      border: 1px dotted #999;
      border-radius: 4px;
      position: relative;
      .image {
        width: 100%;
        height: 100%;
        /deep/ .image-slot,.pdf,.doc,.xls {
          width: 100%;
          height: 100%;
        }
        .pdf {
          background: url('/static/images/pdf.png');
          background-size: cover;
        }
        .doc {
          background: url('/static/images/doc.png');
          background-size: cover;
        }
        .xls {
          background: url('/static/images/xls.png');
          background-size: cover;
        }
      }
      .del {
        position: absolute;
        bottom: 2px;
        right: 2px;
        width: 16px;
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #ff0000;
        background: #fefefe;
        border: 1px solid #ddd;
      }
      .link {
        right: 22px;
      }
    }
  }
</style>

<template>
  <div class="comp-drag-multiple-imagepdfupload-box">
    <div class="images" v-for="(img, index) in imgUrls" :key="img">
      <!--<el-image class="image" :src="img" :preview-src-list="imgUrls"></el-image>-->
      <el-image class="image" :src="img" :preview-src-list="previewUrls">
        <div slot="error" class="image-slot" v-if="pdfEnding(img) || docEnding(img) || xlsEnding(img)">
          <div class="pdf" v-if="pdfEnding(img)"></div>
          <div class="doc" v-if="docEnding(img)"></div>
          <div class="xls" v-if="xlsEnding(img)"></div>
        </div>
      </el-image>
      <a :href="img" target="_blank" class="del" :class="{ link: !justQuery }" title="在新标签中打开，便于下载!"><i class="el-icon-connection"></i></a>
      <template v-if="!justQuery">
        <div class="del" @click="deleteUrl(index)" title="删除"><i class="el-icon-delete"></i></div>
      </template>
    </div>
    <template v-if="!justQuery">
      <el-upload class="upload-btn" :show-file-list="false" :multiple="uploadMultiple"
        accept="image/jpeg,image/gif,image/png,application/pdf"
        :headers="this.uploadHeaders"
        :action="uploadUrl" 
        :data="uploadData"
        :on-success="handleAvatarSuccess"
        :on-error="handleAvatarError"
        :before-upload="beforeAvatarUpload">
        <template>
          <i class="el-icon-plus"></i>
        </template>
      </el-upload>
    </template>
    <div class="clearb"></div>
  </div>
</template>

<script>
export default {
  name: "compImagePdfMultipleUpload",
  props: {
    folder: String,
    fileName: String,
    imageUrls: {
      default: () => [],
      type: Array
    },
    justQuery: {
      default: false,
      type: Boolean
    },
    multiple: Boolean
  },
  data() {
    return {
      uploadUrl:"", 
      uploadData: {
        ContainerName: this.folder || "",
        Name: this.fileName || ""
      },
      previewUrls: [],
      uploadMultiple: this.multiple || false
    }
  },
  computed: {
    imgUrls() {
      let imgs = []
      imgs = this.imageUrls.map(x => {
        let url = window.$util.isUrl(x) ? x : (this.uploadBaseUrl + x)
        // 重组预览图片
        if (this.imageEnding(x)) {
          this.previewUrls.push(url)
        }
        return url
      })
      console.log(imgs)
      return imgs
    }
  },
  mounted() {
    // 数据初始化
    this.uploadUrl = this.uploadBaseUrl + "/api/blob"
  },
  methods: {
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
          this.errorMsg('上传文件大小不能超过 10MB!')
          return false
      }
      window.$common.fullLoading()
      return true
    },
    handleAvatarSuccess(res, file) {
      window.$common.closeFullLoading()
      this.emitImageUrls(res.result.url)
    },
    handleAvatarError() {
      window.$common.closeFullLoading()
    },
    deleteUrl(index) {
      // 删除
      this.emitImageUrls(null, index)
    },
    emitImageUrls(url, index) {
      this.$emit("emitImageUrls", index !== undefined ? index : url)
    },
    imageEnding(str) {
      // 是否图片
      return this.isSuffixEnding(str, ".jpg|.jpeg|.png|.gif|.bmp|.pjpeg|.pjp")
    },
    pdfEnding(str) {
      // 是否pdf
      return this.isSuffixEnding(str, ".pdf")
    },
    docEnding(str) {
      // 是否doc
      return this.isSuffixEnding(str, ".doc|docx")
    },
    xlsEnding(str) {
      // 是否xls
      return this.isSuffixEnding(str, ".xls|.xlsx")
    },
    isSuffixEnding(str, suffixs) {
      let back = false
      try {
        suffixs = suffixs.split("|")
        for (let i in suffixs) {
          let suffix = suffixs[i]
          let start = str.length - suffix.length
          let suff = str.substr(start, suffix.length)
          if (suff && suffix && suff.toLowerCase() == suffix.toLowerCase()) {
            back = true
            break
          }
        }
        return back
      } catch(e) {
        return false
      }
    }
  }
}
</script>